{% extends "base.html" %}

{% block title %}登录 - 学生作业提交系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card shadow">
            <div class="card-header bg-primary text-white text-center">
                <h4 class="mb-0">
                    <i class="bi bi-person-circle me-2"></i>
                    学生登录
                </h4>
            </div>
            <div class="card-body">
                {% if login_mode == 'password' %}
                <!-- 密码登录模式 -->
                <div class="mb-3">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        请输入您的登录密码
                    </div>
                </div>
                <form method="POST">
                    <input type="hidden" name="student_id" value="{{ student_id }}">
                    <div class="mb-3">
                        <label for="student_id_display" class="form-label">
                            <i class="bi bi-person-badge me-1"></i>
                            学号
                        </label>
                        <input type="text" class="form-control" id="student_id_display" 
                               value="{{ student_id }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">
                            <i class="bi bi-key me-1"></i>
                            密码
                        </label>
                        <input type="password" class="form-control" id="password" name="password" 
                               placeholder="请输入16位登录密码" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            登录
                        </button>
                    </div>
                </form>
                <div class="text-center mt-3">
                    <a href="{{ url_for('login') }}" class="text-muted">
                        <i class="bi bi-arrow-left me-1"></i>
                        重新输入学号
                    </a>
                </div>
                
                {% elif login_mode == 'first_time' %}
                <!-- 首次登录模式 -->
                <div class="mb-3">
                    <div class="alert alert-success">
                        <i class="bi bi-star me-2"></i>
                        首次登录，请输入姓名验证身份
                    </div>
                </div>
                <form method="POST">
                    <input type="hidden" name="student_id" value="{{ student_id }}">
                    <div class="mb-3">
                        <label for="student_id_display" class="form-label">
                            <i class="bi bi-person-badge me-1"></i>
                            学号
                        </label>
                        <input type="text" class="form-control" id="student_id_display" 
                               value="{{ student_id }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            <i class="bi bi-person me-1"></i>
                            姓名
                        </label>
                        <input type="text" class="form-control" id="name" name="name" 
                               placeholder="请输入您的真实姓名" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-person-plus me-2"></i>
                            首次登录
                        </button>
                    </div>
                </form>
                <div class="text-center mt-3">
                    <a href="{{ url_for('login') }}" class="text-muted">
                        <i class="bi bi-arrow-left me-1"></i>
                        重新输入学号
                    </a>
                </div>
                
                {% else %}
                <!-- 初始模式：输入学号 -->
                <form method="POST" id="loginForm">
                    <div class="mb-3">
                        <label for="student_id" class="form-label">
                            <i class="bi bi-person-badge me-1"></i>
                            学号
                        </label>
                        <input type="text" class="form-control" id="student_id" name="student_id" 
                               placeholder="请输入学号" required
                               value="{{ student_id if student_id else '' }}">
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-arrow-right-circle me-2"></i>
                            下一步
                        </button>
                    </div>
                </form>
                {% endif %}
            </div>
            <div class="card-footer text-center text-muted">
                <small>
                    {% if login_mode == 'password' %}
                    使用学号和密码登录
                    {% elif login_mode == 'first_time' %}
                    首次登录需要验证姓名
                    {% else %}
                    请输入学号开始登录
                    {% endif %}
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 自动聚焦到相应的输入框
document.addEventListener('DOMContentLoaded', function() {
    {% if login_mode == 'password' %}
    document.getElementById('password').focus();
    {% elif login_mode == 'first_time' %}
    document.getElementById('name').focus();
    {% else %}
    document.getElementById('student_id').focus();
    {% endif %}
});
</script>
{% endblock %} 